@layout("/common/_form.html",{js:["/assets/modular/system/mouldBoard/mouldBoard_add.js"]}){
<style>
    input {
        width: 90px;
        border: none;
    }

    .input-option {
        margin-bottom: 10px;
        border-color: #c9c9c9;
        border-width: 1px;
        background-color: #fff;
        height: 35px;
        border-style: solid;
        line-height: 1.3;
        padding-left: 5px;
        border-radius: 2px;
        width: 145px;
    }

    a {
        color: red
    }

    .btn {
        height: 46px;
        width: 70px;
        border-radius: 5px;
        background-color: #009688;
        color: #fff;
        margin-right: 10px
    }

    #add {
        border-radius: 5px;
        background-color: #009688;
        color: #fff;
        cursor: pointer;
        padding-left: 7px;
        padding-right: 7px;
    }
</style>

<form class="layui-form" id="deptForm" lay-filter="deptForm">
    <div class="layui-fluid" style="padding-bottom: 75px;">
        <div class="layui-card">
            <div class="layui-card-header">基本信息</div>
            <div class="layui-card-body">
                <div class="layui-form-item layui-row">
                    <input name="id" type="hidden"/>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">名称<span style="color: red;">*</span></label>
                        <div class="layui-input-block">
                            <input name="simpleName" placeholder="请输入名称" type="text" class="layui-input"
                                   lay-verify="required" required autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">上级名称<span style="color: red;">*</span></label>
                        <div class="layui-input-block">
                            <input id="pid" name="pid" type="hidden">
                            <input id="pName" name="pName" placeholder="请输入上级名称" type="text" class="layui-input"
                                   lay-verify="required" required autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4" style="height: 55px">
                        <label class="layui-form-label">是否允许自定义添加下级<span style="color: red;">*</span></label>
                        <div class="layui-input-block">
                            <select name="canAddNext" id="canAddNext" lay-verify="required" required>
                                <option value="0">否</option>
                                <option value="1">是</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4" style="">
                        <label class="layui-form-label">是否必选<span style="color: red;">*</span></label>
                        <div class="layui-input-block">
                            <select name="required" id="required" lay-verify="required" required>
                                <option value="1">是</option>
                                <option value="0">否</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-block">
                            <input name="sort" placeholder="请输入排序" type="text" class="layui-input" autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <input name="description" placeholder="请输入备注" type="text" class="layui-input"
                                   autocomplete="off"/>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4">
                        <label class="layui-form-label">数据格式<span style="color: red;">*</span></label>
                        <div class="layui-input-block">
                            <select name="dataType" id="dataType" lay-filter="dataType">
                                <option value="0">空</option>
                                <option value="1">文本</option>
                                <option value="2">单选</option>
                                <option value="3">复选</option>
                                <option value="4">日期</option>
                                <option value="5">图片</option>
                                <option value="6">表格</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline layui-col-md4" id="egData">
                        <label class="layui-form-label">示例内容<span style="color: red;">*</span></label>
                        <div class="layui-input-block">
                            <input name="egData" placeholder="请输入示例内容" type="text" class="layui-input"
                                   autocomplete="off"/>
                        </div>
                    </div>
                    <div id="option">
                        <div class="layui-inline layui-col-md4">
                            <label class="layui-form-label">添加选项<span style="color: red;">*</span></label>
                            <div class="layui-input-block input">
                                <input name="select" placeholder="请输入选项" type="text" autocomplete="off"
                                       class="input-option select"/>
                                <span id="add" type="button" onclick="add1()">+</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-inline layui-col-md12">
            <div style="overflow: auto; height: 350px; width: 860px; padding: 10px;" id="editTable">
                <table style="margin-bottom: 20px;">
                    <tr>
                        <td></td>
                        <td>
                            <input type="button" class="btn" name="Submit" value="新增行" onclick="AddNewRow()"/>
                        </td>
                        <td>
                            <input type="button" class="btn" name="Submit" value="新增列" onclick="AddNewColumn()"/>
                        </td>
                        <td>
                            <input type="button" class="btn" name="Submit2" value="全部清空" onclick="ClearAllSign()"/>
                        </td>
                        <td>
                            <input name="txtTRLastIndex" type="hidden" id="txtTRLastIndex" value="1"/>
                            <input name="txtTDLastIndex" type="hidden" id="txtTDLastIndex" value="4"/>
                        </td>
                    </tr>
                </table>
                <table id="tab" border="1">
                </table>
            </div>
        </div>
    </div>
    <div class="form-group-bottom text-center">
        <button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;提交&emsp;</button>
        <button type="reset" class="layui-btn layui-btn-primary" ew-event="closeDialog">&emsp;取消&emsp;</button>
    </div>
</form>
<script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="application/javascript">
    $('#option').hide();
    $('#egData').hide();
    $('#editTable').hide();

    // 添加选项
    var addinput = " <input name=\"select\" placeholder=\"请输入选项\" type=\"text\"  autocomplete=\"off\" class=\"input-option select\">"

    function add1() {
        $('.input').append(addinput);
        var tags = [];
        $(".select").each(function(i,e){
            alert($(".select").val());
            tags[i]= $(this).context.innerText;
        });
        console.log(tags);
        alert(tags)
    }

    function findObj(theObj, theDoc) {
        var p, i, foundObj;
        if (!theDoc) theDoc = document;
        if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {
            theDoc = parent.frames[theObj.substring(p + 1)].document;
            theObj = theObj.substring(0, p);
        }
        if (!(foundObj = theDoc[theObj]) && theDoc.all)
            foundObj = theDoc.all[theObj];
        for (i = 0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj];
        for (i = 0; !foundObj &&
        theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj, theDoc.layers[i].document);
        if (!foundObj && document.getElementById)
            foundObj = document.getElementById(theObj);
        return foundObj;
    }

    //添加一个列
    count = 1;

    function AddNewColumn() {
        var txtTDLastIndex = findObj("txtTDLastIndex", document);
        var columnID = parseInt(txtTDLastIndex.value);

        var tab = document.getElementById("tab");
        var rowLength = tab.rows.length;
        var columnLength = tab.rows[1].cells.length;

        for (var i = 0; i < rowLength; i++) {
            if (i == 0) {
                var oTd = tab.rows[0].insertCell(columnLength);
                oTd.innerHTML = "<div  style='width:88px;text-align: center'><a href='javascript:' onclick=\"DeleteSignColumn(" + (++columnID) + ")\">删除</a></div>";
            } else if (i == 1) {//第一列:序号
                var oTd = tab.rows[1].insertCell(columnLength);
                oTd.innerHTML = "<div style='width=100%;'></div>";
            } else if (i > 1) {
                var oTd = tab.rows[i].insertCell(columnLength);
                oTd.id = "column" + columnID;
                oTd.innerHTML = "<input autocomplete='off'/>";
            }
        }

    }

    //添加一个行
    var index = 1;

    function AddNewRow() {
        var txtTRLastIndex = findObj("txtTRLastIndex", document);
        var rowID = parseInt(txtTRLastIndex.value);

        var tab = findObj("tab", document);
        var columnLength = tab.rows[0].cells.length;

        //添加行
        var newTR = tab.insertRow(tab.rows.length);
        newTR.id = "SignItem" + rowID;

        for (var i = 0; i < columnLength; i++) {
            if (i == 0) {//第一列:序号
                newTR.insertCell(0).innerHTML = "";
            } else if (i > 0 && i < 4) {
                newTR.insertCell(i).innerHTML = "<input id='textItem0' type='text' style='border: 0px'  autocomplete='off'/>";
            } else if (i >= 4) {
                newTR.insertCell(i).innerHTML = "<input />";
            }
        }

        //添加列:删除按钮
        var lastTd = newTR.insertCell(columnLength);
        lastTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";

        //将行号推进下一行
        txtTRLastIndex.value = (rowID + 1).toString();
    }

    //删除指定行
    function DeleteSignRow(rowid) {
        var tab = findObj("tab", document);
        var signItem = findObj(rowid, document);

        //获取将要删除的行的Index
        var rowIndex = signItem.rowIndex;

        //删除指定Index的行
        tab.deleteRow(rowIndex);


        /* //重新排列序号，如果没有序号，这一步省略
         for (i = 2; i < tab.rows.length; i++) {
             tab.rows[i].cells[0].innerHTML = i - 1;
         }*/

        --index
    }

    //删除指定列
    function DeleteSignColumn(columnId) {
        var tab = document.getElementById("tab");
        var columnLength = tab.rows[1].cells.length;

        //删除指定单元格
        for (var i = 0; i < tab.rows.length; i++) {
            tab.rows[i].deleteCell(columnId);
        }

        // 重新排列序号，如果没有序号，这一步省略
        var column = columnLength - 4;

        for (var j = 1; j < column; j++) {
            tab.rows[1].cells[j + 2].innerHTML = "<div></div>";
        }

        --count;
    }

    //清空列表
    function ClearAllSign() {
        //if (confirm('确定要清空所有吗？')) {
        index = 0;
        var tab = findObj("tab", document);
        var rowscount = tab.rows.length;

        //循环删除行,从最后一行往前删除
        for (i = rowscount - 1; i > 1; i--) {
            tab.deleteRow(i);
        }

        //重置最后行号为1
        var txtTRLastIndex = findObj("txtTRLastIndex", document);
        txtTRLastIndex.value = "1";

        //预添加一行
        AddNewRow();
        //}
    }


</script>
@}

